import {UpOutlined} from '@ant-design/icons'
import {Button, Collapse, Form, Input, Row, Col} from 'antd'
import React, {memo} from 'react'
import {history} from 'umi'
import styles from './index.less'

import {GlobalState} from '@/models/global'

export interface FixedBarProps {
	global: GlobalState
	dispatch: any
}

const {TextArea} = Input
const {Panel} = Collapse
const onFinish = () => {}

const onFinishFailed = () => {}

const onChange = () => {}
// 添加标题前的tip
const defActiveKey: any = ['1']
const genExtra = () => (
	<UpOutlined
		onClick={(event) => {
			event.stopPropagation()
		}}
	/>
)
const genExtraTip = () => <div className="tip" />
export default memo(() => (
	<div className={styles.contract}>
		<div className="content">
			<Form
				name="basic"
				layout="horizontal"
				labelCol={{
					sm: {span: 24},
					md: {span: 12},
					lg: {span: 8},
				}}
				initialValues={{remember: true}}
				onFinish={onFinish}
				onFinishFailed={onFinishFailed}
				autoComplete="off">
				<div className="collapse">
					<Collapse
						defaultActiveKey={defActiveKey}
						onChange={onChange}
						expandIcon={() => genExtraTip()}>
						<Panel header="基础信息" key="1" extra={genExtra()}>
							<div>
								<Row gutter={12}>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="编号"
											name="applyNo"
											rules={[
												{
													required: true,
													message: '请输入编号',
												},
											]}>
											<Input placeholder="请输入编号" />
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="名称"
											name="org"
											rules={[
												{
													required: true,
													message: '请输入名称',
												},
											]}>
											<Input placeholder="请输入名称" />
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="上级组织"
											name="city"
											rules={[
												{
													required: true,
													message: '请输入上级组织',
												},
											]}>
											<Input placeholder="请输入上级组织" />
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item label="描述" name="password">
											<TextArea
												placeholder="请输入描述"
												autoSize={{
													minRows: 2,
													maxRows: 6,
												}}
											/>
										</Form.Item>
									</Col>
								</Row>
							</div>
						</Panel>
					</Collapse>
				</div>
				<Row className="btn">
					<Col span={24}>
						<Form.Item wrapperCol={{offset: 10, span: 4}}>
							<Button
								htmlType="reset"
								className="reset"
								onClick={(e) => {
									e.stopPropagation()
									history.goBack()
								}}>
								关闭
							</Button>
							<Button type="primary" htmlType="submit">
								保存
							</Button>
						</Form.Item>
					</Col>
				</Row>
			</Form>
		</div>
	</div>
))
